<template>
    <div class="account-settings-info-view">
        <a-row :gutter="16">
            <a-col :md="24" :lg="16">
                <!-- 表单 -->
                <a-form layout="vertical" :form="baseForm" @submit="handleSubmit">
                    <a-form-item label="登录名">
                        <a-input :value="$store.getters.getMeInfo['username']" disabled placeholder="给自己起个名字" />
                    </a-form-item>
                    <a-form-item label="头像">
                        <a-upload
                            listType="picture-card"
                            :fileList="fileList"
                            @preview="handlePreview"
                            @change="handleChange"
                        >
                            <div v-if="fileList.length === 0">
                                <a-icon type="plus" />
                                <div class="ant-upload-text">上传头像</div>
                            </div>
                        </a-upload>
                        <!-- 头像预览 -->
                        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                            <img alt="example" style="width: 100%" :src="previewImage" />
                        </a-modal>
                    </a-form-item>
                    <a-form-item>
                        <a-button type="primary" htmlType="submit">保存</a-button>
                    </a-form-item>
                </a-form>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                baseForm :  this.$form.createForm(this),
                //  头像预览显示隐藏
                previewVisible: false,
                previewImage: undefined,
                //  已上传的头像
                fileList: [{
                    uid: '-1',
                    name: 'userPortrait.png',
                    status: 'done',
                    url: this.$store.getters.getMeInfo['userPortrait'],
                }]
            };
        },
        methods: {
            //  关闭预览
            handleCancel () {
                this.previewVisible = false;
            },
            //  头像预览
            handlePreview (file) {
                this.previewImage = file.url || file.thumbUrl;
                this.previewVisible = true;
            },
            //  文件改变
            handleChange ({ fileList }) {
                this.fileList = fileList;
            },
            //  提交表单
            handleSubmit(e) {
                e.preventDefault();
                //  表单参数校验
                // this.baseForm.validateFields((err, params) => {
                //     if (!err) {
                //         updateOnLineAccountBaseInfo(params).then(() => {
                //             this.$message.success("保存成功").then();
                //             this.$store.commit('updateUser',params);
                //         });
                //     }
                // });
            }
        }
    }
</script>
